<template>
	<view>
	<view 
	class="categoryListContainer"
	v-for="(category,index) in indexData.categoryModule"
	:key="index"
	>
		<image 
		class="titleImg" 
		:src="category.titlePicUrl"
		mode=""
		></image>
		<scroll-view class="categoryScroll" scroll-x="true" >
			<view 
			class="categoryItem" 
			v-for="item in category.itemList"
			:key="item.displaySkuId"
			>
				<image 
				class="itemImg" 
				:src="item.listPicUrl" 
				mode=""></image>
				<view class="itemText">{{item.name}}</view>
			</view>
		</scroll-view>
	</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	
	export default{
		data(){
			return {};
		},
		computed:{
			...mapState("home",["indexData"])
		},
		methods:{}
	}
</script>

<style lang="stylus">
	.categoryListContainer
			padding 40upx 0
			.titleImg
				width 100%
				height 370upx
			.categoryScroll
				white-space nowrap
				.categoryItem
					display inline-block
					width 200upx
					margin 0 20upx
					.itemImg
						width 200upx
						height  200upx
						background #eee
					.itemText
						height 60upx
						font-size 24upx
						overflow hidden
						display -webkit-box
						-webkit-line-clamp 2
						-webkit-box-orient vertical
						white-space pre-wrap
</style>
